<template>
  <div class="status">
    <a-card class="card" size="small"  style="width: 100%">
      <a-form  layout="inline" :model="formState" v-bind="formItemLayout">
        <a-form-item style="margin-bottom: 10px" label="语言">
          <a-select
              ref="select"
              v-model:value="formState.fieldB"
              style="width: 120px"
              :options="options1"
              @focus="focus"
              @change="handleChange"
          />
        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="状态">
          <a-select
              ref="select"
              v-model:value="formState.fieldB"
              style="width: 120px"
              :options="options1"
              @focus="focus"
              @change="handleChange"
          />

        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="题目编号">
          <a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
        </a-form-item>
        <a-form-item style="margin-bottom: 10px" label="用户">
          <a-row  :gutter="16">
            <a-col>
              <a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
            </a-col>
            <a-col>
              <a-button type="primary">Submit</a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <a-table
          style="margin-top: 10px"
          :pagination="pagination"
          :columns="columns" :data-source="data">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>

import {computed, reactive, ref} from 'vue';
import type { UnwrapRef } from 'vue';
import type { SelectProps } from 'ant-design-vue';
interface FormState {
  fieldA: string;
  fieldB: string;

}

const formState: UnwrapRef<FormState> = reactive({
  fieldA: '',
  fieldB: '',
});
const options1 = ref([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'disabled',
    label: 'Disabled',
    disabled: true,
  },
  {
    value: 'yiminghe',
    label: 'Yiminghe',
  },
]);
const handleChange = (value: string) => {
  //console.log(`selected ${value}`);
};

const questionBank =  ref(0)
const difficulty = ref(0)
const difficultyList = ref([{
  label:"入门",
  value:0
},
  {
    label:"普及-",
    value:1
  },
  {
    label:"普及/提高-",
    value:2
  },
  {
    label:"普及+/提高",
    value:4
  },
  {
    label:"提高+/省选-",
    value:5
  },
  {
    label:"省选/NOI-",
    value:6
  },
  {
    label:"NOI/NOI+/CTSC",
    value:7
  }]);
const questionBankList = ref([{
  label:"A",
  value:0
},
  {
    label:"B",
    value:1
  }])


const formItemLayout = computed(() => {
  const { layout } = formState;
  return layout === 'horizontal'
      ? {
        wrapperCol: { span: 22 },
      }
      : {};
});

const current = ref(1)
const pageSize = ref(5);
const pagination = computed(() => ({
  total: 200,
  current: current.value,
  pageSize: pageSize.value,
}));

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '4',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '5',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '6',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  }, {
    key: '7',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '8',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '9',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },


];



</script>
<style scoped>

</style>
